<template>
    <div class="shape-box" ref="box">
        <svg width="100%" height="100%">
            <defs>
                <linearGradient
                    :id="`g${fillId}`"
                    :x1="fillCodinator[0]"
                    :y1="fillCodinator[1]"
                    :x2="fillCodinator[2]"
                    :y2="fillCodinator[3]"
                    v-if="fillIsGradient"
                >
                    <stop
                        v-for="item in fillStops"
                        :key="`${item[1]}%`"
                        :offset="`${item[1] * 100}%`"
                        :style="`stop-color:${item[0]};`"
                        />
                </linearGradient>
                <linearGradient
                    :id="`g${strokeId}`"
                    :x1="strokeCodinator[0]"
                    :y1="strokeCodinator[1]"
                    :x2="strokeCodinator[2]"
                    :y2="strokeCodinator[3]"
                    v-if="strokeIsGradient"
                >
                    <stop
                        v-for="item in strokeStops"
                        :key="`${item[1]}%`"
                        :offset="`${item[1] * 100}%`"
                        :style="`stop-color:${item[0]};`"
                        />
                </linearGradient>
            </defs>
            <rect
                :x="strokeWidth / 2"
                :y="strokeWidth / 2"
                :width="width"
                :height="height"
                :stroke-width="strokeWidth"
                :stroke="strokeColor"
                :fill="fillColor"
            ></rect>
        </svg>
    </div>
</template>

<script>
import { colorRgb } from '@/utils/common';
export default {
    props: {
        strokeWidth: {
            type: Number,
            default: 1,
        },
        stroke: {
            type: String,
            default: '#000000',
        },
        fill: {
            type: String,
            default: 'rgba(0, 0, 0, 0)',
        },
        enstyle: {
            type: Object,
            default: () => ({}),
        }
    },
    data() {
        return {
            fillId: Math.random().toFixed(16).slice(2),
            strokeId: Math.random().toFixed(16).slice(2),
        };
    },
    computed: {
        width() {
            const { width } = this.enstyle;
            const { strokeWidth } = this;
            return `${width - strokeWidth}px`;
            
        },
        height() {
            const { height } = this.enstyle;
            const { strokeWidth } = this;
            return `${height - strokeWidth}px`;
        },
        fillIsGradient() {
            const { fill } = this;
            return /gradient/.test(fill);
        },
        strokeIsGradient() {
            const { stroke } = this;
            return /gradient/.test(stroke);
        },
        fillColor() {
            if (this.fillIsGradient) {
                return `url(#g${this.fillId})`;
            }
            return this.fill;
        },
        strokeColor() {
            if (this.strokeIsGradient) {
                return `url(#g${this.strokeId})`;
            }
            return this.stroke;
        },
        fillCodinator() {
            if (this.fillIsGradient) {
                return this.fill.match(/(\d+)%/g);
            }
            return [];
        },
        strokeCodinator() {
            if (this.strokeIsGradient) {
                return this.stroke.match(/(\d+)%/g);
            }
            return [];
        },
        fillStops() {
            if (this.fillIsGradient) {
                const colorStops = this.fill.match(/color-stop\(([^\)]*)\)/g);
                if (colorStops) {
                    const stops = colorStops.map((vo) => {
                        const color = /color-stop\(([^\)]*)\)/g.exec(vo)[1].split(',');
                        return [colorRgb(color[1].trim()), Number(color[0].trim())];
                    });
                    stops.sort((a, b) => a[1] - b[1]);
                    return stops;
                }
                return [];
            }
            return [];
        },
        strokeStops() {
            if (this.strokeIsGradient) {
                const colorStops = this.stroke.match(/color-stop\(([^\)]*)\)/g);
                if (colorStops) {
                    const stops = colorStops.map((vo) => {
                        const color = /color-stop\(([^\)]*)\)/g.exec(vo)[1].split(',');
                        return [colorRgb(color[1].trim()), Number(color[0].trim())];
                    });
                    return stops;
                }
                return [];
            }
            return [];
        }
    }
}
</script>

<style lang="less" scoped>
.shape-box {
    width: 100%;
    height: 100%;
}
</style>